@charset "UTF-8";

@mixin radiusBy($tb: bottom, $lr: left) {
	border-radius: 0;
	border-#{$tb}-#{$lr}-radius: $tabs-title-radius;
}

.#{$ns-comp}tabs {
	margin-bottom: $row-space;
}

.#{$ns-comp}tabs-title {
	white-space: nowrap;
	font-size: 0;
	border: 1px solid $color-border;
	border-width: 0 0 1px;

	> li {
		display: inline-block;
		margin-bottom: -1px;
		list-style-type: none;

		> a {
			display: block;
			min-width: 50px;
			padding: 0 $row-space;

			text-align: center;
			line-height: $input-size-md;
			font-size: $btn-ft-size;  // 14px

			color: $light-black;
			background: $color-thead;
			border: 1px solid $color-border;
			border-left-width: 0;

			user-select: none;
			outline: none;
			text-decoration: none;

			&:hover,
			&:focus {color: $dark-blue;}

			&[disabled] {
				color: $gray !important;
				pointer-events: none;
			}
		}

		&:first-child > a {
			border-left-width: 1px;
			border-top-left-radius: $tabs-title-radius;
		}

		&:last-child > a {border-top-right-radius: $tabs-title-radius;}

		&.#{$ns-is}active > a {
			color: $blue;
			background: $white;
			border-bottom-color: transparent;
			cursor: default;
			pointer-events: none;
		}

	}
}

.#{$ns-comp}tabs-cont {
	border: 1px solid $color-border;
	border-top-width: 0;
}

.#{$ns-comp}tab-pane {
	display: none;
	height: 100%;
	padding: $tabs-cont-pd-tb $row-space;
	box-sizing: border-box;
	overflow: auto;

	&.#{$ns-is}active {display: block;}
}

/* 不同显示方式 */
.#{$ns-comp}tabs-stacked-left,
.#{$ns-comp}tabs-stacked-right {
	@include clearFloat;

	display: table;

	> .#{$ns-comp}tabs-title {
		display: table-cell;
		width: 1%;
		vertical-align: top;
		border-bottom-width: 0;
		border-right-width: 1px;

		> li {
			display: block;
			margin: 0;
			margin-right: -1px;

			&:last-child > a {
				border-bottom-width: 1px;
				@include radiusBy();
			}

			&.#{$ns-is}active > a {
				border-color: $color-border;
				border-right-color: transparent;
			}
		}

		a {
			line-height: $input-size-md + 4px;  // 堆叠排列时增加可点击区域高度，使之看起来更协调
			border-width: 1px;
			border-bottom-width: 0;
		}
	}

	> .#{$ns-comp}tabs-cont {
		display: table-cell;
		border-width: 1px;
		border-left-width: 0;
	}
}

.#{$ns-comp}tabs-stacked-right {
	> .#{$ns-comp}tabs-title {
		border: 0;
		border-left: 1px solid $color-border;

		> li {
			margin: 0;
			margin-left: -1px;

			&:first-child > a {
				@include radiusBy(top, right);
			}

			&:last-child > a {
				@include radiusBy(bottom, right);
			}

			&.#{$ns-is}active > a {
				border-color: $color-border;
				border-left-color: transparent;
			}
		}
	}

	> .#{$ns-comp}tabs-cont {
		border-width: 1px;
		border-right-width: 0;
	}
}

.#{$ns-comp}tabs-bottom {
	> .#{$ns-comp}tabs-title {
		border-bottom-width: 0;
		border-top-width: 1px;

		> li {
			margin: 0;
			margin-top: -1px;

			&:first-child > a {
				@include radiusBy();
			}

			&:last-child > a {
				@include radiusBy(bottom, right);
			}

			&.#{$ns-is}active > a {
				border-color: $color-border;
				border-top-color: transparent;
			}
		}
	}
	> .#{$ns-comp}tabs-cont {
		border-bottom-width: 0;
		border-top-width: 1px;
	}
}
